<template>
  <header class="header">
    <!-- 头部的第一行 -->
    <div class="top">
      <div class="container">
        <div class="loginList">
          <p>咖喱商城欢迎您！</p>
<!--          没有用户名-->
          <p v-show="!userName">
            <span>请</span>
            <router-link to="/login">登录</router-link>
            <router-link to="/register" class="register">免费注册</router-link>
          </p>
          <p v-show="userName">
            <a>{{userName}}</a>
            <a class="register" @click="logout">退出登录</a>
          </p>
        </div>
        <div class="typeList">
          <router-link to="/center/myorder">我的订单</router-link>
          <router-link to="/shopcart">我的购物车</router-link>
          <a href="###">个人中心</a>
          <a href="###">消息通知</a>
          <a href="###">咖喱会员</a>
          <a href="###">商家后台</a>
          <a href="###">合作招商</a>
          <a href="###">下载app</a>
        </div>
      </div>
    </div>
    <!--头部第二行 搜索区域-->
    <div class="bottom">
      <h1 class="logoArea">
<!--        target属性等于_blank的时候在新的页面展示数据-->
        <router-link class="logo" title="咖喱官网" to="/home" target="_self">
          <img src="./images/icon.png">
        </router-link>
      </h1>
      <div class="searchArea">
        <form action="###" class="searchForm">
          <input type="text"
                 id="autocomplete"
                 class="input-error input-xxlarge"
                 v-model="keyword"/>
          <button class="sui-btn btn-xlarge btn-danger"
                  type="button"
                  @click="goSearch"
          >搜索</button>
        </form>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  name: "top",
  data(){
    return{
      keyword:""
    }
  },
  methods:{
    goSearch(){
      //路由传递参数
      //向search路由进行跳转,如果有query参数
      if (this.$route.query){
        let loction = {name:"search",params:{keyword:this.keyword||undefined}}
        loction.query =this.$route.query
        this.$router.push(loction)
      }
    },
    //退出登录
    async logout(){
       try {
         await this.$store.dispatch('userLogout')
         await this.$router.push('/home')
       }catch (error){
         alert(error.message)
       }
    }
  },
  mounted() {
    //通过全局事件总线清除关键字
    this.$bus.$on('clear',()=>{
      this.keyword=''
    })
  },
  computed:{
    userName(){
      return this.$store.state.user.userInfo.name
    }
  }
}
</script>

<style lang="less" scoped>
.header {
&>.top {
   background-color: #eaeaea;
   height: 30px;
   line-height: 30px;

.container {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;

.loginList {
  float: left;

p {
  float: left;
  margin-right: 10px;

.register {
  border-left: 1px solid #b3aeae;
  padding: 0 5px;
  margin-left: 5px;
}
}
}

.typeList {
  float: right;

a {
  padding: 0 10px;

&+a {
   border-left: 1px solid #b3aeae;
 }
}

}

}
}

&>.bottom {
   width: 1200px;
   margin: 0 auto;
   overflow: hidden;

.logoArea {
  float: left;

.logo {
img {
  width: 70px;
  margin: 15px 15px;
}
}
}

.searchArea {
  float: right;
  margin-top: 35px;

.searchForm {
  overflow: hidden;

input {
  box-sizing: border-box;
  width: 490px;
  height: 32px;
  padding: 0px 4px;
  border: 2px solid #ea4a36;
  float: left;

&:focus {
   outline: none;
 }
}

button {
  height: 32px;
  width: 68px;
  background-color: #ea4a36;
  border: none;
  color: #fff;
  float: left;
  cursor: pointer;

&:focus {
   outline: none;
 }
}
}
}
}
}
</style>